window.dom={
  create(string){ //创建一个节点
    const container=document.createElement('template')
    //把一段HTML写到一个标签里边，这段HTML自动变成元素
    container.innerHTML=string.trim()  //把传入的字符串写入到这个div标签里,trim去掉空格
    return container.content.firstChild  //把这个标签的子元素返回出来就是用户要的标签
  },
  after(node,node2){ //node2放到node后面
    console.log(node.nextSibling)
    node.parentNode.insertBefore(node2,node.nextSibling); //将新节点插入到目标节点的下一个节点之前
  },
  before(node,node2){ //node2放到node前面
    node.parentNode.insertBefore(node2,node)
  },
  append(node,son){ //给node增加一个son子元素
    node.appendChild(son)
  },
  wrap(node,parent){ //给node增加一个parent
    dom.before(node,parent)
    dom.append(parent,node) //node插入新位置，之前的node就会从之前的位置移开
  },
  remove(node){//删除node节点
    node.parentNode.removeChild(node)
    return node  //return可以让外面删的人保留节点的引用
  },
  empty(node){ // 删除node节点的后代,并返回引用
    const array=[]
    let x=node.firstChild
    while(x){
      array.push(dom.remove(x))
      x=node.firstChild
    }
    return array //这里的是移除什么就返回什么
  },
  attr(node,name,value){ //（重载）修改元素属性值
    if(arguments.length===3){ //长度为3，修改属性
      node.setAttribute(name,value)
    }
    
    if(arguments.length===2){//长度为2，查询
      return node.getAttribute(name)
    }
  },
  text(node,string){
   if(arguments.length===2){
      if('innerText' in node){//适配不同浏览器
        node.innerText=string
      }else{
       node.textContent=string
      }
    }else if(arguments.length===1){
      if('innerText' in node){
        return node.innerText
      }else{
        return node.textContent
        }
      }
    },
  html(node,string){//读HTML内容
    if(arguments.length===2){
      node.innerHTML=string
    }else if(arguments.length===1){
      return node.innerHTML
    }
  },
  
  style(node,name,value){
    //node.style.border=...
    //node.style.color=...
    if(arguments.length===3){
      //dom.style(div,'color','red')
      node.style[name]=value
    }else if(arguments.length===2){
      if(typeof name==='string'){
        //dom.style(div,'color') 相当于查询color属性
        return node.style[name]
      }else if(name instanceof Object){
        //可能传入的参数类型dom.style(div,object)
        for(let key in name){
        //注意node.style.key会变成字符串
        node.style[key]=name[key]
        }
      }
    }
  },
  //class是一个对象
  class: {
    add(node,className){
      node.classList.add(className)
    },
    remove(node,className){
      node.classList.remove(className)
    },
    has(node,className){
     return node.classList.contains(className)
    }
  },
  
  on(node,eventName,fn){
    node.addEventListener(eventName,fn)
  },
  off(node,eventName,fn){
    node.removeEventListener(eventName,fn)
  },
  

  find(selector,scope){ //在特定范围里查找
    //有scope就在scope里面调用查找，没有就用document
    return (scope||document).querySelectorAll(selector)
  },

  parent(node){
    return node.parentNode
  },
  children(node){
    return node.children
  },
  siblings(node){//返回同级元素
    return Array.from(node.parentNode.children)
    .filter(n=>n!==node)
    //伪数组变成数组，遍历数组，只要伪数组元素不等于自身就放到数组里边
  },
  next(node){//查找当前元素的弟弟
    let x=node.nextSibling
    while(x&&x.nodeType===3){
      //如果为文本格式（nodeType===3是文本）让x为下一个节点循环
      x=x.nextSibling
    }
    return x
  },

  previous(node){//当前元素的前一个元素
    let x=node.previousSibling
    while(x&&x.nodeType===3){
      //如果为文本格式（nodeType===3是文本）让x为下一个节点循环
      x=x.previousSibling
    }
    return x
  },

  each(nodeList,fn){ //遍历所有节点
    for(let i=0;i<nodeList.length;i++){
      fn.call(null,nodeList[i])
    }
  },

  index(node){
   const list= dom.children(node.parentNode)
   let i
   for (i = 0; i < list.length; i++) {
     if(list[i]===node){
      break
     }
   }
   return i
  }

};

